<template>
  <div class="MyInfo">
    <!-- 概况信息 -->
    <div class="userInfo_overview">
      <div class="nickname">
        <div class="overview_left">
          <span class="uname">昵称 : </span>
          <span class="uinput">{{ aimUserInfo.nickName }}</span>
        </div>
      </div>
      <div class="description">
        <div class="overview_left">
          <span class="uname">描述 : </span>
          <span class="uinput">{{
            `本站第 ${aimUserInfo.id} 位用户，入住本站${aimUserInfo.createTime}`
              | transformUserInfoTime
          }}</span>
        </div>
      </div>
      <div class="gender">
        <div class="overview_left">
          <span class="uname">性别 : </span>
          <span class="uinput">{{
            aimUserInfo.gender === 2
              ? "未知 🐤"
              : aimUserInfo.gender === 1
              ? "♂ 男"
              : "♀ 女"
          }}</span>
        </div>
      </div>
      <div class="about">
        <div
          class="overview_left"
          :style="aimUserInfo.id === userInfo.id ? 'width:90%;' : ''"
        >
          <span class="uname">简介 : </span>
          <span
            class="uinput"
            :style="aimUserInfo.id === userInfo.id ? 'max-width: 776px;' : ''"
            >{{ handlerEmoji | uncodeUtf16 }}</span
          >
        </div>
        <div class="overview_right" v-if="aimUserInfo.id === userInfo.id">
          <a href="javascript:;" @click="toUserInfo">前往设置</a>
        </div>
      </div>
    </div>
    <!-- 账号情况 -->
    <ul class="userInfo_sidebar">
      <li v-for="(item, index) in userInfo_list" :key="index">
        <div class="userInfo_sidebar_icon">
          <i class="iconfont" :class="item.icon ? item.icon : ''"></i>
        </div>
        <div class="userInfo_sidebar_box">
          <p class="userInfo_sidebar_title">{{ item.title }}</p>
          <!-- | numberConvert -->
          <p class="userInfo_sidebar_count">
            {{
              aimUserInfo[item.keyword]
                ? JSON.parse(aimUserInfo[item.keyword]).content.length
                : "0"
            }}
          </p>
          <p class="userInfo_sidebar_subtitle">{{ item.subtitle }}</p>
        </div>
      </li>
    </ul>
    <!-- 退出登录 -->
    <div class="mobile_logout d-block d-md-none">
      <el-button type="success" plain @click="logout">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "MyInfo",
  computed: {
    ...mapState("user", ["aimUserInfo", "userInfo"]),
    // 处理个人简介的emoji表情问题
    handlerEmoji() {
      return this.aimUserInfo.description
        ? this.aimUserInfo.description
        : "没有简介";
    },
  },
  data() {
    return {
      userInfo_list: [
        {
          title: "发布的文章",
          keyword: "article",
          subtitle: "在本站的投稿",
          icon: "icon-wenzhangguanli",
        },
        {
          title: "点赞的文章",
          keyword: "agree",
          subtitle: "在本站的点赞",
          icon: "icon-dianzan1",
        },
        {
          title: "收藏",
          keyword: "collect",
          subtitle: "在本站的收藏",
          icon: "icon-shitishoucang",
        },
        {
          title: "粉丝",
          keyword: "fans",
          subtitle: "粉丝人数",
          icon: "icon-fensi",
        },
        {
          title: "关注",
          keyword: "concern",
          subtitle: "关注的人数",
          icon: "icon-guanzhu",
        },
        {
          title: "草稿箱",
          keyword: "draft",
          subtitle: "待编辑的文章",
          icon: "icon-caogaoxiang",
        },
      ],
    };
  },
  methods: {
    toUserInfo() {
      this.$parent.$parent.active = 1;
      this.$router.replace(`/center/${this.$route.params.id}/material`);
    },
    logout() {
      this.$store.dispatch("user/Logout").then(() => {
        this.$win("退出成功");
        this.$router.replace("/community");
      });
    },
  },
  mounted() {
    this.$parent.active = 0;
  },
};
</script>

<style lang="less" scoped>
.MyInfo {
  .mobile_logout {
    width: 98%;
    height: 46px;
    margin: 14px auto 0;
    /deep/.el-button {
      border-radius: 8px;
      color: var(--a-button-hover-color);
      background: #fbfffa;
      border-color: #ceebc0;
      width: 100%;
      height: 100%;
      font-size: 15px;
    }
  }
  .userInfo_avatar {
    display: flex;
    background: #fff;
    padding: 12px 0 12px 24px;
    .avatar {
      overflow: hidden;
      margin: auto 0;
      width: 84px;
      height: 84px;
      border: 2px solid #fff;
      box-shadow: 0 0 10px 2px rgb(0 0 0 / 7%);
    }
    .userInfo_base {
      margin-left: 14px;
      padding-top: 16px;
      text-align: left;
      .nickName {
        color: #222226;
        font-weight: 500;
        line-height: 24px;
        font-size: 20px;
      }
      .updateAvatar {
        border: 1px solid #ccc;
        color: #ccc;
        background: #fff;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 14px;
        position: absolute;
        right: 30px;
        top: 24px;
        transition: color 0.6s, border 0.6s;
        &:hover {
          border: 1px solid #222;
          color: #222;
        }
      }
    }
  }
  .userInfo_overview {
    background: #fff;
    padding: 8px 0;
    .nickname {
      .uinput {
        /* 省略号 */
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    & > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 32px 16px 26px;
      border-bottom: 1px solid #f3f3f3;
      .overview_left {
        display: flex;
        width: 100%;
        .uname {
          max-width: 42px;
          min-width: 42px;
          color: #999;
          font-size: 16px;
        }
        .uinput {
          margin-left: 12px;
          color: #323232;
          flex: auto;
          text-align: left;
          max-width: 848px;
        }
      }
      .overview_right {
        font-size: 12px;
        color: var(--a-button-hover-color);
      }
    }
  }
  .userInfo_sidebar {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0px;
    li {
      list-style-type: none;
      width: 33.3%;
      height: 140px;
      border-right: 1px solid #f3f3f3;
      border-bottom: 1px solid #f3f3f3;
      padding: 20px 26px;
      position: relative;
      .userInfo_sidebar_icon {
        position: absolute;
        right: 20px;
        top: 6px;
        i {
          color: rgba(209, 233, 255, 0.28);
          font-size: 60px;
        }
      }
      .userInfo_sidebar_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        p {
          text-align: left;
          margin-bottom: 0;
        }
        .userInfo_sidebar_title {
          font-size: 17px;
          // font-weight: 700;
        }
        .userInfo_sidebar_count {
          // font-weight: 700;
          font-size: 24px;
        }
        .userInfo_sidebar_subtitle {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}
</style>